<template>
	<view class="content">
		<image style="width: 100%; height: 450rpx;" :src="baseInfo.thumb" mode="widthFix"></image>
		<view class="header">
			<view class="header-left">
				<view class="line"></view>
				<view class="header-title">施工现场</view>
			</view>
			<image class="header-more" src="../../static/image/Frameas (1).png" style="top: -30rpx;left:700rpx;" mode="widthFix"></image>
		</view>
		<view class="div_as">
		<view class="div_as_item" v-for="(item,index) in constructionList" :key="index">
			<image class="div_as-image" :src="item.img_url" mode="scaleToFill"></image>
			<view class="div_as-tex">{{item.tag_name}}</view>
		</view>
		</view>
		<button size="mini" v-if="isappmoit" class="btn" hover-class="btn-hover" type="default" @click="ishpw=true">预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'more',
							baseInfo: {},
							constructionList: [],
							total: 0,
							page: 1,
							limit: 10,
							id: 0,
							isappmoit:false
			}
		},
		onReachBottom() {
			this.loadNextPage()
		},
		onLoad(e) {
			this.id=e.id
			this.loadaPage(true)
		},
		methods: {
			loadNextPage(){
				if(this.page<this.total/this.limit){
					this.page++;
					this.loadPage(false);
				}else{
					this.isappmoit=true
				}
			},
			loadPage(isFirstLoad){
				uni.showLoading({
					title:"加载中..."
				})
				setTimeout(()=>{
					uni.request({
						url:'https://baiyi.kent.work/api/v1/system/getConstructionDetail',
						method:'POST',
						data:{
							id:this.id,
							page:this.page,
							limit:this.limit
						},
						success:res=>{
							this.baseInfo=res.data.data.baseInfo;
							this.page=res.data.data.list.page
							this.total=res.data.data.list.total
							this.constructionList=this.constructionList.concat(res.data.data.list.list);
							uni.setNavigationBarTitle({
								title:this.baseInfo.name
							})
						},
						complete() {
							uni.hideLoading()
						}
					},
					isFirstLoad?0:400
					)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.line {
		width: 8rpx;
		height: 30rpx;
		background: #3d9c36;
	}
	.header-left {
		height: 20rpx;
		display: flex;
		align-items: center;
	}
	.header-title {
		font-family: PingFang SC, PingFang SC-Bold;
		color: #333333;
		font-size: 32rpx;
		font-weight: 700;
		margin-left: 20rpx;
	}
	.header-more {
		width: 38rpx;
		height: 38rpx;
		
	}
	.div_as_image{
		width: 670rpx;
		height: 406rpx;
	}
	.div_as{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.btn{
		width: 328rpx;
		height: 80rpx;
		background: #3d9c36;
		border-radius: 8rpx;
	}
</style>